<template>
  <div class="container">
    <div class="content">
      <div class="cont-title">
        请按照以下顺序摆放相关证件并拍照，如未婚可忽略配偶证件信息
      </div>

      <div class="carmera">
        <div class="carmera-title">申请人身份证人面像为必传</div>
        <div class="carmera-list">
          <input
            type="file"
            accept="image/*"
            capture="camera"
            class="updateBtn"
            @change="uplodaCamera($event, 1)"
          />

          <div>
            <div
              class="carmera-list-item carmera-list-1"
              :class="{ active: step > 0 }"
            >
              <span class="carmera-list-desc">
                营业执照
              </span>
            </div>
          </div>

          <div>
            <div
              class="carmera-list-item carmera-list-2"
              :class="{ active: step > 0 }"
            >
              <span class="carmera-list-desc">
                申请人身份证人像面
              </span>
            </div>
            <div
              class="carmera-list-item carmera-list-3"
              :class="{ active: step > 0 }"
            >
              <span class="carmera-list-desc">
                银行卡数字面
              </span>
            </div>
            <div
              class="carmera-list-item carmera-list-2"
              :class="{ active: step > 0 }"
            >
              <span class="carmera-list-desc">
                配偶身份证人像面
              </span>
            </div>
          </div>
        </div>

        <div class="carmera-title" style="margin-top:60px">
          申请人身份证人面像为必传
        </div>
        <div class="carmera-list">
          <input
            type="file"
            accept="image/*"
            capture="camera"
            class="updateBtn"
            @change="uplodaCamera($event, 1)"
          />
          <div>
            <div
              class="carmera-list-item carmera-list-4"
              :class="{ active: step === 2 }"
            >
              <span class="carmera-list-desc">
                申请人身份证国徽面
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="loan-btn" :class="{ active: step === 2 }" @click="toNext">下一步</div>

    <!--  <input
      type="file"
      multiple="multiple"
      accept="image/*"
      capture="camera"
      @change="uplodaCamera($event)"
      ref="file"
    /> -->
    <!-- <input
      type="file"
      accept="video/*"
      capture="user"
      class="updateBtn"
      @change="uplodaCamera($event, 1)"
    /> -->

    <div class="fix-circle" v-if="step !== 2">
      <div class="fix-body">
        <div class="fix-circle-add"></div>
        <div class="fix-circle-border"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      canNext: false,
      step: 0 // 所处阶段  【0， 1， 2】
    }
  },
  mounted () {},
  methods: {
    uplodaCamera (e) {
      console.log(e)
      const file = e.target.files[0]
      console.log(file.name)
      this.step++
      if (this.step === 1) {
        this.$toast2({
          msg: '上传成功，请继续上传申请人身份证国徽面'
        })
      }
      if (this.step === 2) {
        this.$toast2({
          msg: '申请人身份证国徽面上传成功!'
        })
      }
    },
    toNext () {
      console.log(this.step)
      if (this.step !== 2) return
      this.$router.push({
        path: '/form'
      })
    }
    // uplodaVideo (e) {
    //   const file = e.target.files[0]
    //   console.log(file.name)
    // }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 34px 24px;
  color: #fff;
  background-image: url("../assets/images/loan/border_pck3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  // border: 1px solid #fff;
  text-align: left;

  .cont-title {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0;
    line-height: 18px;
  }
}

.carmera {
  margin: 22px 0 0 0;
  .carmera-title {
    position: relative;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0;
    transform: skewX(-20deg);

    &:before {
      position: absolute;
      top: 0;
      left: -24px;
      display: block;
      content: " ";
      height: 18px;
      width: 16px;
      // background-color: #699dff;
      background: -webkit-gradient(
        linear,
        0 100%,
        100% 100%,
        color-stop(0, rgba(29, 93, 221, 1)),
        color-stop(0.5, rgba(29, 93, 221, 1)),
        color-stop(0.51, rgba(105, 157, 255, 1)),
        color-stop(1, rgba(105, 157, 255, 1))
      );
    }
  }

  .carmera-list {
    position: relative;
    text-align: center;
    margin: 0 0 40px 0;
    .carmera-list-item {
      position: relative;
      display: inline-block;
      width: 80px;
      height: 50px;
      margin: 16px 8px;
      // background-image: url("../assets/images/carmera/yyzz.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-color: none;
      .carmera-list-desc {
        position: absolute;
        left: 4px;
        right: 4px;
        top: 110%;
        font-size: 12px;
      }
    }
    .carmera-list-1 {
      background-image: url("../assets/images/carmera/yyzz.png");
      &.active {
        background-image: url("../assets/images/carmera/yyzz_active.png");
      }
    }
    .carmera-list-2 {
      background-image: url("../assets/images/carmera/sfz.png");
      &.active {
        background-image: url("../assets/images/carmera/sfz_active.png");
      }
    }
    .carmera-list-3 {
      background-image: url("../assets/images/carmera/yhk.png");
      &.active {
        background-image: url("../assets/images/carmera/yhk_active.png");
      }
    }
    .carmera-list-4 {
      background-image: url("../assets/images/carmera/sfzbm.png");
      &.active {
        background-image: url("../assets/images/carmera/sfzbm_active.png");
      }
    }
  }
}

.loan-btn {
  display: block;
  margin: 42px auto;
  width: 192px;
  height: 70px;
  line-height: 70px;
  // border: 1px solid #ccc;
  background-image: url("../assets/images/loan/btn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  color: #ccc;
  font-size: 20px;

  &.active {
    color: #fff;
    background-image: url("../assets/images/loan/btn_active.png");
  }
}

.fix-circle{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  text-align: center;
  z-index: 2;
  .fix-body{
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: 75px;
    height: 75px;
    background-image: url("../assets/images/loan/circle_back.png");
    background-repeat: no-repeat;
    background-size: contain;
    animation: scale 4s linear infinite;

    .fix-circle-add{
      position: absolute;
      top: 30%;
      left: 30%;
      width: 40%;
      height: 40%;
      background-image: url("../assets/images/loan/circle_add.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
    .fix-circle-border{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("../assets/images/loan/circle_border.png");
      background-repeat: no-repeat;
      background-size: cover;
      animation: rotate 2s linear infinite;
    }
  }
}

@keyframes rotate{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes scale{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

.updateBtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
}
</style>
